<!doctype html>
<html>
  <head>
    <title>fides-js script components demo page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!--
      Pass along any params to the fides.js script. For example, visiting
      http://localhost:3001/fides-js-demo.html?geolocation=fr-id
      will pass a geolocation query param to fides.js
    -->
    <script>
      const params = new URLSearchParams(window.location.search);
      (function () {
        const tcfEnabled = window.fidesConfig?.options?.tcfEnabled;
        const gppEnabled =
          window.fidesConfig?.experience?.gpp_settings?.enabled;
        const geolocation = params.get("geolocation");
        const src = `/fides.js?initialize=false${
          tcfEnabled ? "&tcf=true" : ""
        }${gppEnabled ? "&gpp=true" : ""}${
          !!params.size ? `&${params.toString()}` : ""
        }`;

        document.write('<script src="' + src + '"><\/script>');
      })();
      var deleteCookie = function () {
        document.cookie =
          "fides_consent=;Path=/;expires='Thu, 01 Jan 1970 00:00:01 GMT';";
        location.reload();
      };
      if (params.get("disable_animations") === "true") {
        document.write(
          "<style>div#fides-banner-container:not(.fides-embedded) { transition: none !important; }</style>",
        );
      }
    </script>
    <script>
      // Our cypress test suite requires injecting consent options through an obj on window
      // we default to the below for dev purposes
      const init = params.get("init");
      var fidesConfig = window.fidesConfig || {
        consent: {
          options: [
            {
              cookieKeys: ["data_sales"],
              default: true,
              fidesDataUseKey: "data_use.sales",
            },
            {
              cookieKeys: ["tracking"],
              default: false,
              fidesDataUseKey: "advertising",
            },
          ],
        },
        // NOTE: copied from /clients/fides-js/__tests__/__fixtures__/mock_experience.json
        experience: {
          id: "pri_111",
          created_at: "2024-01-01T12:00:00.000000+00:00",
          updated_at: "2024-01-01T12:00:00.000000+00:00",
          region: "us_ca",
          component: "banner_and_modal",
          available_locales: ["en", "es"],
          experience_config: {
            id: "pri_222",
            created_at: "2024-01-01T12:00:00.000000+00:00",
            updated_at: "2024-01-01T12:00:00.000000+00:00",
            regions: ["us_ca"],
            component: "banner_and_modal",
            disabled: false,
            is_default: true,
            dismissable: true,
            show_layer1_notices: false,
            layer1_button_options: "opt_in_opt_out",
            allow_language_selection: true,
            auto_detect_language: true,
            auto_subdomain_cookie_deletion: true,
            cookie_deletion_based_on_host_domain: true,
            language: "en",
            accept_button_label: "Accept Test",
            acknowledge_button_label: "Acknowledge Test",
            banner_description: "Banner Description Test",
            banner_title: "Banner Title Test",
            description: "Description Test",
            purpose_header: "Purpose Header Test",
            privacy_policy_link_label: "Privacy Policy Test",
            privacy_policy_url: "https://privacy.example.com/",
            privacy_preferences_link_label: "Manage Preferences Test",
            reject_button_label: "Reject Test",
            save_button_label: "Save Test",
            title: "Title Test",
            translations: [
              {
                language: "en",
                accept_button_label: "Accept Test",
                acknowledge_button_label: "Acknowledge Test",
                banner_description: "Banner Description Test",
                banner_title: "Banner Title Test",
                description: "Description Test",
                purpose_header: "Purpose Header Test",
                modal_link_label: "Link Label Test",
                is_default: true,
                privacy_policy_link_label: "Privacy Policy Test",
                privacy_policy_url: "https://privacy.example.com/",
                privacy_preferences_link_label: "Manage Preferences Test",
                reject_button_label: "Reject Test",
                save_button_label: "Save Test",
                title: "Title Test",
                privacy_experience_config_history_id: "pri_333",
              },
              {
                language: "es",
                accept_button_label: "Aceptar Prueba",
                acknowledge_button_label: "Reconocer Prueba",
                banner_description: "Descripción del Banner de Prueba",
                banner_title: "Título del Banner de Prueba",
                description: "Descripción de la Prueba",
                purpose_header: "Prueba de Encabezado de Propósito",
                modal_link_label: "Prueba de etiqueta",
                is_default: true,
                privacy_policy_link_label: "Política de Privacidad de Prueba",
                privacy_policy_url: "https://privacy.example.com/es",
                privacy_preferences_link_label:
                  "Administrar Preferencias de Prueba",
                reject_button_label: "Rechazar Prueba",
                save_button_label: "Guardar Prueba",
                title: "Título de la Prueba",
                privacy_experience_config_history_id: "pri_444",
              },
            ],
          },
          privacy_notices: [
            {
              id: "pri_555",
              origin: "pri_xxx",
              created_at: "2024-01-01T12:00:00.000000+00:00",
              updated_at: "2024-01-01T12:00:00.000000+00:00",
              name: "Advertising Test",
              notice_key: "advertising",
              description: "Advertising Description Test",
              internal_description: "Advertising Internal Description Test",
              consent_mechanism: "notice_only",
              data_uses: ["marketing.advertising.first_party.targeted"],
              enforcement_level: "frontend",
              disabled: false,
              has_gpc_flag: true,
              framework: null,
              default_preference: "opt_out",
              cookies: [],
              systems_applicable: false,
              translations: [
                {
                  language: "en",
                  title: "Advertising Test",
                  description: "Advertising Description Test",
                  privacy_notice_history_id: "pri_666",
                },
                {
                  language: "es",
                  title: "Prueba de Publicidad",
                  description: "Descripción de la Publicidad de Prueba",
                  privacy_notice_history_id: "pri_777",
                },
              ],
            },
            {
              id: "pri_888",
              origin: "pri_xxx",
              created_at: "2024-01-01T12:00:00.000000+00:00",
              updated_at: "2024-01-01T12:00:00.000000+00:00",
              name: "Analytics Test",
              notice_key: "analytics",
              internal_description: "Analytics Internal Description",
              consent_mechanism: "opt_out",
              data_uses: ["analytics.reporting.ad_performance"],
              enforcement_level: "frontend",
              disabled: false,
              has_gpc_flag: false,
              framework: null,
              default_preference: "opt_in",
              cookies: [{ name: "_ga", path: null, domain: null }],
              systems_applicable: true,
              translations: [
                {
                  language: "en",
                  title: "Analytics Test",
                  description: "Analytics Description Test",
                  privacy_notice_history_id: "pri_999",
                },
                {
                  language: "es",
                  title: "Prueba de Analítica",
                  description: "Descripción de la Analítica de Prueba",
                  privacy_notice_history_id: "pri_000",
                },
              ],
            },
          ],
        },
        geolocation: {
          country: "US",
          location: "US-CA",
          region: "CA",
        },
        options: {
          debug: true,
          isOverlayEnabled: true,
          isGeolocationEnabled: false,
          geolocationApiUrl: "",
          overlayParentId: null,
          modalLinkId: null,
          privacyCenterUrl: "http://localhost:3001",
          fidesApiUrl: "http://localhost:8080/api/v1",
          fidesPrimaryColor: "#008000",
          showFidesBrandLink: true,
          otFidesMapping: null,
        },
      };
      if (init !== "false") {
        window.Fides.init(fidesConfig);
        Fides.gtm(
          !!window.fides_overrides && window.fides_overrides.gtmOptions,
        );
      }
    </script>

    <style>
      body {
        margin: 16px 16px 64px 16px;
        background-color: #fafafa;
        font-family: "Inter", Arial, Helvetica, sans-serif;
        height: 100vh;
        overflow: scroll;
        overflow-x: hidden;
      }
      h2 {
        font-size: 1.1rem;
        margin-bottom: 4px;
      }
      pre {
        background-color: #e6e6e8;
        padding: 16px;
        white-space: pre-wrap;
        overflow-y: auto;
        margin: 0px;
        border-radius: 4px;
        box-shadow: 0 2px 2px inset rgba(0, 0, 0, 0.05);
      }
      #fides-modal-link {
        border: none;
        padding: 0;
        background: none;
        cursor: pointer;
        text-decoration: underline;
      }
      .delete-cookie {
        background-color: #2b2e35;
        color: #fafafa;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <main>
      <h1>fides.js demo page</h1>
      <p>
        This page exists to test and debug the fides.js script. It is used by
        the Privacy Center's test suite to ensure that users' consent choices
        can be accessed by pages that live outside of the Privacy Center.
      </p>

      <div>
        <button type="button" onclick="deleteCookie()">
          delete cookie and reload
        </button>
      </div>

      <div id="render-embed-here"></div>
      <script>
        setTimeout(() => {
          const app = document.getElementById("render-embed-here");
          if (app) {
            const container = document.createElement("div");
            container.id = "fides-embed-container";
            app.appendChild(container);
          }
        }, window.render_delay || 0);
      </script>

      <h2>Was the fides global defined?</h2>
      <pre id="has-fides"></pre>

      <h2>Consent JSON</h2>
      <pre id="consent-json"></pre>

      <h2>Consent Modal Link</h2>
      <div id="render-link-here"></div>
      <script>
        setTimeout(() => {
          const app = document.getElementById("render-link-here");
          if (app) {
            const button = document.createElement("button");
            // Display the fides configured modal link label (if any).
            button.textContent = Fides.getModalLinkLabel();
            button.id = "fides-modal-link";
            app.appendChild(button);
          }
        }, window.render_delay || 0);
      </script>

      <h2>Consent Experience</h2>
      <pre id="consent-experience"></pre>

      <h2>Geolocation</h2>
      <pre id="consent-geolocation"></pre>

      <h2>Consent Options</h2>
      <pre id="consent-options"></pre>

      <h2>Property id</h2>
      <pre id="property-id"></pre>

      <h2>Global Privacy Control (GPC) enabled</h2>
      <pre
        id="gpc"
      ><script>document.write(!!window.navigator.globalPrivacyControl)</script></pre>
    </main>
  </body>

  <script>
    (() => {
      const hasFides = typeof Fides === "object";
      document.getElementById("has-fides").textContent = String(hasFides);

      if (!hasFides) {
        return;
      }

      // Once Fides.js is initialized, show some debug information on the page
      const onInitialized = () => {
        console.log("Fides has been initialized!");
        // Pretty-print the fides consent object and add it to the page.
        document.getElementById("consent-json").textContent = JSON.stringify(
          Fides.consent,
          null,
          2,
        );

        // Pretty-print the fides experience config object and add it to the page.
        document.getElementById("consent-experience").textContent =
          JSON.stringify(Fides.experience, null, 2);

        // Pretty-print the fides geolocation object and add it to the page.
        document.getElementById("consent-geolocation").textContent =
          JSON.stringify(Fides.geolocation, null, 2);

        // Pretty-print the fides options object and add it to the page.
        document.getElementById("consent-options").textContent = JSON.stringify(
          Fides.options,
          null,
          2,
        );

        // Pretty-print the fides property id  and add it to the page.
        document.getElementById("property-id").textContent = JSON.stringify(
          Fides.config.propertyId,
          null,
          2,
        );

        // Test behavior of integrations that can be configured without/before their platform scripts.
        Fides.meta({
          consent: Fides.consent.tracking,
          dataUse: Fides.consent.data_sales,
        });
      };

      // Handle both synchronous & asynchronous initialization
      if (Fides.initialized) {
        onInitialized();
      } else {
        window.addEventListener("FidesInitialized", onInitialized);
      }
      window.addEventListener("FidesUpdated", () => {
        document.getElementById("consent-json").textContent = JSON.stringify(
          Fides.consent,
          null,
          2,
        );
      });
    })();
  </script>
</html>
